<template>
  <el-container style="height: 100%">
    <el-aside :width="sideWidth +'px'" style="background-color: rgb(238, 241, 246); height: 100%">
      <Aside :isCollapse="isCollapse "/>
    </el-aside>

    <el-container>
      <el-header>
        <Head :collapseBtnClass="collapseBtnClass" :collapse="collapse" />
      </el-header>

      <el-main>
        <!-- 当前页面的子路由会在 <router-view /> 里面展示 -->
        <router-view />
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
import Aside from "@/components/Aside";
import Head from "@/components/Head";
export default {
  name: 'User',
  components: {Aside, Head},
  data() {
    return {
      tableData: [],
      collapseBtnClass: "el-icon-s-unfold",
      isCollapse: false,
      sideWidth:200,
      isShow: true,
      headBg:"headBg"
    }
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse
      this.isCollapse ? this.sideWidth = 64 : this.sideWidth = 200
      this.isCollapse ? this.collapseBtnClass = "el-icon-s-fold" : this.collapseBtnClass = "el-icon-s-unfold"
    }
  }
}
</script>

<style>


.el-header {
  background-color: #B3C0D1;
  color: #333;
}

.el-aside {
  color: #333;
}
</style>